import React, { Component } from "react";
// 导入connect，用于链接store
import { connect } from "react-redux";
// 导入方法
import { toAddUpdate } from "@/store/actions/productDate";

// 导入models
import models from "@/models/Products";
// 导入css
import "@/assets/css/Products.css";
// 导入styled
import styled from "styled-components";
// 导入loading
import Loading from "@/components/Loading";
// 导入search组件
// import Search from "./ProductSearch";
// 导入antd
import { PlusOutlined } from "@ant-design/icons";
import {
  Button,
  Form,
  Input,
  Pagination,
  Select,
  Table,
  Space,
  Tag,
} from "antd";
const { Option } = Select;

class Product extends Component {
  state = {
    data: {},
    // 显示加载动画
    loadShow: false,
    // 搜索类型
    searchPro: -1,
    // searchNote搜索条件
    searchNote: {},
    pageNumber:1
  };

  columns = [
    {
      title: "商品名称",
      dataIndex: "name",
      key: "name",
      render: (text) => <span>{text}</span>,
    },
    {
      title: "商品描述",
      dataIndex: "desc",
      key: "desc",
    },
    {
      title: "价格",
      dataIndex: "price",
      key: "price",
    },
    {
      title: "状态",
      key: "status",
      dataIndex: "status",
      render: (text, record) => (
        <Space size="middle">
			  <div>{record.status === 1 ? <Tag color='red'>下架</Tag> : <Tag color='green'>上架</Tag>}</div>
			  <Button onClick={() => {
				  this.changeStatus(record)
			  }} size="small">修改状态</Button>
        </Space>
      ),
    },
    {
      title: "操作",
      key: "action",
      render: (text, record) => (
        <Space size="middle">
          <span
            className="spanClick"
            onClick={() => {
              this.props.toAddUpdate({ data: record });
              this.props.history.push("/home/detail");
            }}
          >
            详情
          </span>
          <span
            className="spanClick"
            onClick={() => {
              this.props.toAddUpdate({ data: record });
              this.props.history.push("/home/addupdata/1");
            }}
          >
            修改
          </span>
        </Space>
      ),
    },
  ];
  render() {
    console.log(this.state.pageNumber);
    let {pageNumber} = this.state
    return (
      <div>
        <div className="site-page-header-ghost-wrapper">
          <div
            className="headerLeft"
            style={{ position: "relative", width: "100%" }}
          >
            <Form
              ref={this.formRef}
              name="control-ref"
              onFinish={this.onFinish}
              className="headerLeft"
            >
              <Form.Item
                name="search"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
                <Select
                  onChange={this.onSearchChange}
                  allowClear
                  style={{ width: "150px" }}
                >
                  <Option value="按名称搜索">按名称搜索</Option>
                  <Option value="按描述搜索">按描述搜索</Option>
                </Select>
              </Form.Item>
              <Form.Item name="searchNote">
                <Input style={{ width: "150px" }} placeholder="关键字" />
              </Form.Item>

              <Form.Item>
                <Button type="primary" htmlType="submit">
                  搜索
                </Button>
              </Form.Item>
            </Form>
            <Button
              key="1"
              type="primary"
              icon={<PlusOutlined />}
              onClick={() => {
                this.props.history.push("/home/addupdata/10");
              }}
            >
              新增
            </Button>
          </div>
        </div>
        <div style={{ position: "relative" }}>
          <Table
            columns={this.columns}
            dataSource={this.state.dataShow}
            rowKey={(record) => record._id}
            pagination={false}
          />
          {this.state.loadShow ? (
            <Load>
              <Loading />
            </Load>
          ) : (
            <></>
          )}
          <Page>
            <Pagination
              showQuickJumper={true}
              current={pageNumber}

              total={this.state.data.total}
              onChange={this.onChange}
              pageSizeOptions={[10]}
            />
          </Page>
        </div>
      </div>
    );
  }

  componentDidMount() {
    console.log(this.state.pageNumber);
    this.getList(1);
  }

  changePage = () => {
    // console.log(this.props);
  };
  // 获取商品列表
  getList = (pageNumber) => {
    this.setState({ loadShow: true });
    let pageNum = pageNumber === 1 ? 1 : pageNumber;
    let obj = {
      pageNum,
      pageSize: 5,
    };
    models.proList(obj).then((ret) => {
      this.setState(
        () => {
          return {
            data: ret.data,
            dataShow: ret.data.list,
          };
        },
        () => {
          this.setState({ loadShow: false });
        }
      );
    });
  };

  // 改变页码
  onChange = (pageNumber) => {
    console.log(pageNumber);
    this.setState({
      pageNumber
    })
    if (this.state.searchPro === -1) {
      this.getList(pageNumber);
    } else {
      let obj = this.state.searchNote;
      obj.pageNum = pageNumber;
      this.getSearchList(obj);
    }
  };

  formRef = React.createRef();
  onSearchChange = (value) => {
    //   console.log(value);
    this.setState(() => {
      return { searchPro: value === "按名称搜索" ? 1 : 2 };
    });
  };

  // 点击搜索按钮
  onFinish = (values) => {
    // console.log(values);
    if (values.searchNote) {
      // 如果存在searchNote，则进行搜索
      let obj = {
        pageNum: 1,
        pageSize: 5,
      };
      values.search === "按名称搜索"
        ? // 按名称搜索
          (obj.productName = values.searchNote)
        : // 按名称搜索
          (obj.productDesc = values.searchNote);

      this.setState({ searchNote: obj });
      this.getSearchList(obj);
    } else {
      this.getList(1);
      this.setState({ searchPro: -1 });
    }
  };

  // 获取搜索list
  getSearchList = (obj) => {
    this.setState({ loadShow: true });
    models.proSearch(obj).then((ret) => {
      this.setState(
        () => {
          return {
            data: ret.data,
            dataShow: ret.data.list,
          };
        },
        () => {
          this.setState({ loadShow: false });
        }
      );
    });
	};
	
	// 修改状态
	changeStatus = (data) => {
		// console.log(data);
		let obj = {
			productId: data._id,
			status:data.status === 1?2:1
		}
		models.Pro_Status(obj).then(ret => {
			// console.log(ret);
			if (ret.status === 0) {
				this.onChange(1)
			}
		})
		
	}
}

const Page = styled.div`
  margin: 10px 0 0 300px;
`;
const Load = styled.div`
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #eee;
  opacity: 0.5;
  box-sizing: border-box;
  padding-bottom: 100px;
`;

export default connect((state) => ({}), { toAddUpdate })(Product);
